<template>
  <el-card
    class="box-card"
    :style="boxCardStyle"
  >
    <!-- ###############对话框 开始##################### -->
    <!-- 添加对话框 -->
    <el-dialog
      title="收货地址"
      :visible.sync="addDialogVisible"
    >
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      title="收货地址"
      :visible.sync="editDialogVisible"
    >
    </el-dialog>
    <!-- 删除对话框 -->
    <el-dialog
      title="收货地址"
      :visible.sync="deleteDialogVisible"
    >
    </el-dialog>
    <!-- ################对话框 结束#################### -->

    <div class="head-function" style="white-space: nowrap;">
      <el-switch
        v-model="online_simulation_switch"
        :width="80"
        class="head-switch"
        active-color="#13ce66"
        inactive-color="#adc4ed"
        style="float:left"
        :active-text="SIMULATION"
      >
      </el-switch>
      <el-button
        style="float:right;margin-top:20px;margin-left:10px;margin-right:5%"
        circle
        type="primary"
        icon="el-icon-edit"
        @click="editDialogVisible = true"
      ></el-button>
      <el-button
        style="float:right;margin-top:20px;margin-left:10px;"
        circle
        type="primary"
        icon="iconfont iconminusround"
        @click="deleteDialogVisible = true"
      ></el-button>
      <el-button
        style="float:right;margin-top:20px;margin-left:10px;"
        circle
        type="primary"
        icon="iconfont iconplus-round"
        @click="handleAddBtnClick"
      ></el-button>
    </div>
    <el-table
      :data="tableData.data"
      stripe
      highlight-current-row
      :row-style="rowStyleHandle"
      class="table-style"
      :max-height="tableMaxHeightCompu"
      style="width: 100%"
      :header-cell-style="header_cell_style"
      ref="dataAcquisitionTable"
    >
      <el-table-column
        size="medium"
        align="center"
        width="120"
        type="selection"
        fixed
      >
      </el-table-column>
      <template v-for="item of tableData.columns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :height="300"
          size="medium"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span v-if="item.prop === 'three'">
              <span v-if="scope.row.updating">
                <el-select
                  placeholder="please select content"
                  v-model="tableData.sel[item.prop]"
                  filterable
                >
                  <el-option
                    v-for="item in dataTypeOptions"
                    :key="item.name"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </span>
              <span v-show="!scope.row.updating">{{ 'hello' }}</span>
            </span>
            <span v-else>
              <span v-if="scope.row.updating">
                <el-input
                  v-show="scope.row.updating"
                  :autofocus="item.prop === 'one'"
                  v-model="tableData.sel[item.prop]"
                  placeholder="please input content"
                ></el-input>
              </span>
              <span v-show="!scope.row.updating">{{ scope.row[item.prop] }}</span>
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </el-card>
</template>
<script>
import { DataTableRequest } from '@/api/api'
export default {
  model: {
    prop: 'p_div_style',
    event: 'update'
  },
  props: {
    p_div_style: Object
  },
  data () {
    return {
      dataTypeOptions: [
        {
          name: 'redis',
          value: 'Redis'
        },
        {
          name: 'opc',
          value: 'OPC'
        },
        {
          name: 'influx',
          value: 'Influx'
        }
      ],
      SIMULATION: 'SIMULATION',
      online_simulation_switch: true,
      header_cell_style: {
        backgroundColor: '#eafaf4',
        fontSize: '1.5rem',
        height: '1.5rem'
      },
      active_text: 'SIMULATION',
      tableData: {
        sel: null,
        data: [],
        columns: [{
          prop: 'one',
          label: 'App Tag',
          width: 200,
        },
        {
          prop: 'two',
          label: 'App Tag Name',
          width: 200,
        }
          ,
        {
          prop: 'three',
          label: 'Data Type',
          width: 150,
        }
          ,
        {
          prop: 'four',
          label: 'Sampling Cycle',
          width: 200,
        }
          ,
        {
          prop: 'five',
          label: 'BlueBox Tag',
          width: 250,
        },
        {
          prop: 'six',
          label: 'BlueBox Tag Name',
          width: 250,
        },
        {
          prop: 'seven',
          label: 'Value',
          width: 200,
        },
        {
          prop: 'eight',
          label: 'Simulation',
          width: 200,
        }]
      },
      addDialogVisible: false,
      editDialogVisible: false,
      deleteDialogVisible: false,
      boxCardStyle: {},
      dataLen: 0
    }
  },
  methods: {
    rowStyleHandle (row) {
      if (row.rowIndex % 2 === 0) {
        // return 'background-color: #e1f9f0;height: 50px;';
      }
      return 'height:50px;text-align:center';
    },
    handleAddBtnClick (e) {
      // console.log(e)
      // 先检查当前是否有正在处于更新状态的行
      for (let i of this.tableData.data) {
        if (i.updating) {
          this.$message.warning('请先保存当前编辑项')
          // this.$refs.dataAcquisitionTable.find('input').focus()
          return;
        }
      }
      let obj = {
        selection: '',
        one: '',
        two: '',
        three: '',
        four: '',
        five: '',
        six: '',
        seven: '',
        eight: '',
        updating: true
      }
      this.tableData.data.unshift(obj)
      this.$refs.dataAcquisitionTable.setCurrentRow(obj);
      this.tableData.sel = JSON.parse(JSON.stringify(obj));
    }
  },
  computed: {
    tableMaxHeightCompu () {
      //减去header 内容区padding(上下各有两个20，共4个) card的padding
      return window.innerHeight - 60 - 20 - 20 - 40 - 100 - 80;
    }
  },
  updated () {
    // console.log(this.$refs.tab_table.$parent)
  },
  watch: {
    online_simulation_switch (newVal) {
      this.SIMULATION = newVal ? 'SIMULATION' : 'ON LINE'
    },
    tableData (newData) {
      this.dataLen = newData.data.length
    },
    p_div_style: {
      handler (newValue, oldValue) {
        // console.log('resize')
        this.$set(this.boxCardStyle, 'height', newValue.height - 152 + 40 + 'px')
      },
      deep: true
    }
  },
  mounted () {
    let url = '/data/arr'
    DataTableRequest(url).then(data => {
      this.tableData.data = data
    })
    this.$set(this.boxCardStyle, 'height', this.p_div_style.height - 152 + 40 + 'px')

  }
}
</script>
<style lang="less" scoped>
@media screen and (max-width: 740px) {
  .el-button,.head-function {
    display: none;
  }
}
@deep: ~">>>";
@{deep} .el-icon-edit {
  font-size: 30px;
}
@{deep} .iconminusround {
  font-size: 30px;
}
@{deep} .iconplus-round {
  font-size: 30px;
}

.el-button {
  // color: white;
  padding: 2px;
  // background: #14d288;
  // border-color: #14d289ab;
  // font-size: 1.2rem;
  // border-width: 2px;
}
// .el-button:focus {
//   color: white;
//   background: #1cec9c;
//   border-color: #1cec9c;
// }
// .el-button:hover {
//   color: white;
//   background: #16e495;
//   border-color: #16e495;
// }
// .el-button:active {
//   color: white;
//   background: rgb(12, 160, 115);
//   border-color: rgb(12, 160, 115);
// }
.head-function {
  width: 100%;
  height: 80px;
  background-color: #eafaf4;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .head-switch {
    margin-left: 3%;
    margin-top: 2%;
    // display: inline-block;
    position: relative;
  }
}
.table-style {
  @{deep} .el-table__body-wrapper {
    overflow: hidden;
  }
  @{deep} .el-table__body-wrapper:hover {
    overflow: overlay;
  }
  @{deep} .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
    border-radius: 10px;
  }
  @{deep} .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
}
.el-switch {
  @{deep} .el-switch__core {
    height: 34px;
    border-radius: 20px;
  }
}
@{deep} .el-switch.is-checked .el-switch__core::after {
  left: 100%;
  height: 30px;
  margin-left: -31px;
}
@{deep} .el-switch__core:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 30px;
  height: 30px;
  background-color: #fff;
}
@{deep} .el-switch__label * {
  line-height: 1;
  font-size: 1.2rem;
  display: inline-block;
}
@{deep} .el-switch__label.is-active {
  color: #14d288;
}
@{deep} .cell {
  height: 2.5rem;
  // text-align: center;
}
.box-card {
  position: relative;
  // height: 100%;
  border-radius: 10px;
  white-space: nowrap;
}
</style>